<template>
  <page-header-wrapper>
    <a-card>
      <div class="flex justify-between mb-4">
        <div class="flex">
          <a-input placeholder="请输入姓名、账号" style="width:300px" v-model="name" />
          <a-button type="primary" class="left" @click="search">查询</a-button>
        </div>
        <addUser @update="getData" v-action:add />
      </div>
      <a-table rowKey="id" :columns="columns" :data-source="data">
        <span slot="roleId" slot-scope="roleId">
          {{ getRoleName(roleId) }}
        </span>
        <span slot="opr" slot-scope="_, record">
          <addUser :record="record" @update="getData" v-action:update></addUser>
          <!-- <a-divider type="vertical" /> -->
          <a-popconfirm title="确认删除吗?" @confirm="() => onDelete(record)">
            <a href="javascript:;" v-action:delete>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { getSysUser, deleteSysUser } from '@/api/common'
const columns = [
  {
    title: '编号',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '账号',
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '角色',
    key: 'roleId',
    dataIndex: 'roleId',
    scopedSlots: { customRender: 'roleId' }
  },
  {
    title: '邮箱地址',
    key: 'email',
    dataIndex: 'email'
  },
  {
    title: '手机号',
    key: 'phone',
    dataIndex: 'phone'
  },
  {
    title: '公司',
    key: 'company',
    dataIndex: 'company'
  }
  // {
  //   title: '操作',
  //   key: 'opr',
  //   dataIndex: 'opr',
  //   scopedSlots: { customRender: 'opr' }
  // }
]
export default {
  name: 'user',
  data() {
    return {
      data: [],
      name: ''
    }
  },
  components: {
    addUser: () => import('./addUser.vue')
  },
  computed: {
    roleList() {
      return this.$store.getters.roleList
    },
    columns() {
      if (this.$auth('user.update') || this.$auth('user.delete')) {
        return [
          ...columns,
          {
            title: '操作',
            key: 'opr',
            dataIndex: 'opr',
            scopedSlots: { customRender: 'opr' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getRoleName(id) {
      return this.roleList?.find(el => el.id == id)?.roleName || '??'
    },
    async search() {
      this.getData()
    },
    async onDelete(record) {
      await deleteSysUser(record.id)
      this.$message.info('已删除')
      this.getData()
    },
    async getData() {
      const form = {}
      if (this.name) {
        form.name = this.name
      }
      const res = await getSysUser(form)
      this.data = res.result.data
    }
  }
}
</script>
<style lang="css" scoped>
.left {
  margin-left: 15px;
}
</style>
